<template>
  <div :id="mapId"
       :coordinate="coordinate"
       :position="position"
       :blockShow="blockShow"
       :regiontest="region"
       :regionName="regionName"
       :clear="clear"
       :equipment="equipment"
       :reset="reset"
       class="MapItemId"
  ></div>
</template>

<!--var color = d3.scale.category20c();//20种颜色-->

<script>
  export default {
    props: {
      mapId: String, //传入div的id
      coordinate: Object, //传入点的坐标
      blockShow: Boolean,  //是否展示
      region: Array, //区域
      position: Object,
      equipment: Array, //设备
      regionName: String,//区域名称
      reset: String,//是否重置
      clear: Boolean,//清除点
    },
    data: function () {
      return {
        size: 10,
        getProportion: 10,

        hadLine: false,

        stationCoor: {},
        labelCoor: {},
        //地图里面对象的初始化
        svgViewport: {},
        gX: {},
        gY: {},
        gridlinesX: {},
        gridlinesY: {},
        bkg: {},
        plane: {},
        planeInfo: [],
        //初始化基站图标
        stationIcon: {},
        //初始化地图上面移动的文字和圆点
        circles: {},
        text: {},
        coorText: {},
        rect: {},
        //初始化g，相当于初始化画布
        innerSpace: {},
        //标签id和基站
        stationId: [],
        stationPos: {},
        labelsNodeID: [],
        stationsNodeID: [],

        //在地图缩放时重新算坐标系用
        newx: null,
        newy: null,
        scale: null,
        startCoor: false,

        getTime: 0,//检查某一个点不更新用
        dataArr: {},  //轨迹展示的所有终端的坐标集合。
        dataArrLen: 4,  //轨迹长度的全局变量（轨迹的点的个数）
        //地图缩放值（最大和最小）
        maxEnlarge: null,
        maxNarrow: null,
      }
    },
    mounted() {
      this.init()
      // this.createLine()
    },
    watch: {
      // windowWidth: function () {
      //     this.onresize()
      // },
      position: function () {
        this.startMove()
        // this.getEquipment()
      },
      reset: function () {
        this.resetSize();
      },
      blockShow: function () {
        this.remove()
      },
      clear: function () {
        this.removeCircle()
      },
      equipment: function () {
        this.getEquipment()
      }
    },
    methods: {
      xAxisScale: function () {
        return d3.scaleLinear()
          .domain([this.startx, this.startx + this.rangeWidth])
          .range([0, this.svgWidth]) //横坐标范围
      },
      yAxisScale: function () {
        return d3.scaleLinear()
          .domain([this.starty, this.starty + this.rangeHeight])
          .range([this.svgHeight, 0]) //纵坐标范围
      },
      xAxis: function () {
        return d3.axisTop(this.xAxisScale()) //横刻度方向
      },
      yAxis: function () {
        return d3.axisRight(this.yAxisScale())//纵刻度范围
      },
      getbkg: function (id, x, y, width, height, url) {
        return this.nodeLayer.append("svg:image")
          .attr("xlink:href", url)
          .attr("x", this.xAxisScale()(x))
          .attr("y", this.yAxisScale()(y))
          .attr("width", this.xAxisScale()(width) - this.xAxisScale()(0))
          .attr("height", this.yAxisScale()(0) - this.yAxisScale()(height))
      },
      addInnerSpace: function () {
        return this.svgViewport.append("g")
          .attr("class", "inner_space")
      },
      zoom: function () {
        return d3.zoom()
        // .on("zoom", this.zoomFunction)
          .scaleExtent([this.maxNarrow, this.maxEnlarge])
      }, //缩放程度
      addNodeLayer: function () {
        return this.innerSpace.append("g")
      },//创建一个g相当于创建一个div
      createStationIcon: function (nodeID, node_x, node_y, size, url) {
        var a = this.initCoordinate()[0];
        var b = this.initCoordinate()[1];
        var testX = this.newx ? this.newx : this.xAxisScale();
        var testY = this.newy ? this.newy : this.yAxisScale();
        var coor = this.nodeLayer.append("svg:image")
          .attr("class", nodeID)
          .attr("xlink:href", '')
          .attr("x", this.xAxisScale()(node_x) - size / 2)
          .attr("y", this.yAxisScale()(node_y) - size / 2)
          .attr("width", size / b)
          .attr("height", size / b)
          .attr("transform", a);
        coor.info = {x: node_x, y: node_y, offest_x: size / 2, offest_y: size / 2};
        return coor
      }, //创建一个基站图标（svg）并且能改变颜色，根据坐标缩放
      createText: function (nodeID, node_x, node_y, name, color) {
        var a = this.initCoordinate()[0];
        var b = this.initCoordinate()[1];
        var coor = this.nodeLayer.append("text")
          .attr("id", nodeID)
          .attr("x", this.xAxisScale()(node_x) - this.size / b)
          .attr("y", this.yAxisScale()(node_y) + this.size * 2 / b)
          .text(name)
          .attr("font-size", this.size / b)
          .attr("fill", color || "black")
          .attr("transform", a)
        coor.info = {x: node_x, y: node_y, offest_x: this.size, offest_y: this.size * 2}
        return coor
      },//创建基站下面的文字，并根据图标一起动
      createCoorText: function (nodeID, node_x, node_y, coor, color) {
        var a = this.initCoordinate()[0];
        var b = this.initCoordinate()[1];
        var coor = this.nodeLayer.append("text")
          .attr("id", nodeID)
          .attr("x", this.xAxisScale()(node_x) - this.size / b)
          .attr("y", this.yAxisScale()(node_y) + this.size * 3 / b)
          .text(coor)
          .attr("font-size", this.size / b)
          .attr("fill", color || "black")
          .attr("transform", a);
        coor.info = {x: node_x, y: node_y, offest_x: this.size, offest_y: this.size * 3};
        return coor
      },//创建标签下面的文字，并且要动
      createCircle: function (node_x, node_y, color) {
        var a = this.initCoordinate()[0];
        var b = this.initCoordinate()[1];
        return this.nodeLayer.append("circle") //需要添加nodeID，坐标x和y，颜色，缩放比例。
          .attr("r", 6 / b)
          .attr("cx", node_x)
          .attr("cy", node_y)
          .attr("fill", color)
          .attr("transform", a)
      },
      createLine() {
        var t = this.stationPos
        // {
        //   "8001": [0, 0, 0],
        //   "8002": [2.0381852767764497, -1.0557422155824427, -0.40300041322963637],
        //   "8003": [1.8715225145141268, 2.420404007488325, -0.45500073448832135],
        //   "8146#2": [9.420651911679018, 2.5655502913752475, 2.3439951166156807],
        //   "8147#1": [3.341307586699365, -1.2198898113674521, -0.14600047614431977],
        //   "8147#2": [10.136542749234522, -0.7949341742858957, -1.2110054202538367],
        //   "8146#1": [2.4330926781492246, 2.3466219868273765, 2.403999491611665]
        // };
        var self = this;
        var svg = d3.select("svg");//创建 svg
        // color = d3.scaleOrdinal(d3.schemeCategory20); //颜色
        var nodes = [{id: "8001"}, {id: "8002"}, {id: "8003"}, {id: "8146#1"}, {id: "8147#1"}, {id: "8146#2"}, {id: "8147#2"}],
          links = [];
        var simulation = d3.forceSimulation(nodes)  //模仿力
          .force("charge", d3.forceManyBody().strength(-1000))   //指控多个力的力量
          .force("link", d3.forceLink(links).distance(200))  //线的距离
          .force("x", d3.forceX())
          .force("y", d3.forceY())
          .alphaTarget(1)
          .on("tick", ticked);
        var link = svg.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
          node = svg.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");
        restart();
        d3.timeout(function () {
          links.push({source: nodes[0], target: nodes[1]}); // Add a-b.
          links.push({source: nodes[2], target: nodes[1]}); // Add b-c.
          links.push({source: nodes[2], target: nodes[0]}); // Add c-a.

          links.push({source: nodes[5], target: nodes[3]}); // Add a-b.
          links.push({source: nodes[5], target: nodes[6]}); // Add b-c.
          links.push({source: nodes[4], target: nodes[6]}); // Add c-a.
          links.push({source: nodes[4], target: nodes[3]}); // Add c-a.
          restart();
        }, 1000);

        function restart() {
          // this.nodeLayer.append("circle") //需要添加nodeID，坐标x和y，颜色，缩放比例。

          node = node.data(nodes, function (d) {
            return d.id;
          });

          node = node.enter().append("circle")
            .attr("fill", function (d) {
              return (d.id === '8001' || d.id === '8002' || d.id === '8003') ? 'red' : 'blue'
            })
            .call(function (node) {
              node.transition().attr("r", 6);
            })
            .merge(node);

          // Apply the general update pattern to the links.
          link = link.data(links, function (d) {
            return d.source.id + "-" + d.target.id;
          });

          link = link.enter().append("line")
            .call(function (link) {
              link.transition().attr("stroke-opacity", 1);
            })
            .attr("marker-end", function (d) {
              if (d.source.id + "-" + d.target.id === "8003-8002" ||
                d.source.id + "-" + d.target.id === "8147#1-8146#1") {
                return "url(#arrow)"
              }
            })
            .merge(link);

          // Update and restart the simulation.
          simulation.nodes(nodes);
          simulation.force("link").links(links);
          simulation.alpha(1).restart();
        }

        function ticked() {
          node.attr("cx", function (d) {
            return self.xAxisScale()(t[d.id][0])
          })
            .attr("cy", function (d) {
              return self.yAxisScale()(t[d.id][1]);
            })

          link.attr("x1", function (d) {
            return self.xAxisScale()(t[d.source.id][0]);
          })
            .attr("y1", function (d) {
              return self.yAxisScale()(t[d.source.id][1]);
            })
            .attr("x2", function (d) {
              return self.xAxisScale()(t[d.target.id][0]);
            })
            .attr("y2", function (d) {
              return self.yAxisScale()(t[d.target.id][1]);
            });
        }
      },

      createAngleText() {
        var t = this.stationPos;
        var base = this.getAngle(t["8002"][0], t["8002"][1], t["8003"][0], t["8003"][1]);
        var rover = this.getAngle(t["8146#1"][0], t["8146#1"][1], t["8147#1"][0], t["8147#1"][1]);
        if (this.text["angleText"]) {
          this.moveText("angleText", -1, -1, "夹角度数：" + Math.abs(base - rover).toFixed(2))
        } else {
          this.text["angleText"] = this.createText("angleText", -1, -1, "夹角度数：" + Math.abs(base - rover).toFixed(2));
        }
      },

      initCoordinate: function () {
        var a = this.bkg[this.mapId].attr("transform")
        var b;
        if (a != null) {
          var c = a.split(/[(]|[)]/)
          b = parseFloat(c[c.length - 2])
        } else {
          b = 1
        }
        return [a, b];
      },
      addXScale: function () {
        var height = this.svgHeight - 1;
        return this.innerSpace.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height + ")")
          .call(this.xAxis())
      },
      addYScale: function () {
        return this.innerSpace.append("g")
          .attr("class", "axis axis--y")
          .call(this.yAxis())
      },
      getPlane: function () {
        return this.innerSpace.append("g")
      },
      make_x_gridlines: function () {
        return d3.axisBottom(this.xAxisScale())
      },
      make_y_gridlines: function () {
        return d3.axisLeft(this.yAxisScale())
      },
      addXGridLines: function () {
        return this.svgViewport.append("g")
          .attr("class", "grid")
          .style("stroke", "#FF0000")
          .style("stroke-width", "0.3px")
          .style("stroke-dasharray", "5,5")
          .style("stroke-opacity", "0.2")
          .style("stroke", "dashed")
          .attr("transform", "translate(0," + this.svgHeight + ")")
          .call(this.make_x_gridlines()
            .tickSize(-this.svgHeight)
            .tickFormat("")
          )
      },
      addYGridLines: function () {
        return this.svgViewport.append("g")
          .attr("class", "grid")
          .style("stroke-width", "0.3px")
          .style("stroke-dasharray", "5,5")
          .style("stroke-opacity", "0.2")
          .attr("fill", "red !important")
          .call(this.make_y_gridlines()
            .tickSize(-this.svgWidth)
            .tickFormat("")
          )
      },//画横纵坐标网格线
      createCanvas: function () {
        this.svgViewport = d3.select("#" + this.mapId)
          .append("svg")
          .attr("preserveAspectRatio", "xMinYMin meet")
          .attr("viewBox", "0 0 " + this.svgWidth + " " + this.svgHeight) // <min-x>, <min-y>, width 和 height。
          .classed("svg-container", true)
          .call(this.zoom());

        this.innerSpace = this.addInnerSpace();
        this.nodeLayer = this.addNodeLayer();
        this.createArrow();
        // for (var i = 0; i < this.region.length; i++) {
        // this.region[i].region_name, this.region[i].start_point[0], this.region[i].start_point[1] + this.region[i].height, this.region[i].width, this.region[i].height, this.region[i].background_image)
        this.bkg[this.mapId] = this.getbkg(this.mapId, this.startx, (this.starty + this.rangeHeight), this.rangeWidth, this.rangeHeight, "")
        // }

        this.addCanvasGridLines();
      }, //根据传入的div块的id创建画布，画布宽高可以指定，并且可以传入背景图片，但是要求背景图片和宽高一样
      addCanvasGridLines() {
        this.gY = this.addYScale();
        this.gX = this.addXScale();
        this.gridlinesX = this.addXGridLines();
        this.gridlinesY = this.addYGridLines()
      },
      zoomFunction() {
        var self = this;
        this.newx = d3.event.transform.rescaleX(this.xAxisScale());
        this.newy = d3.event.transform.rescaleY(this.yAxisScale());

        this.gX.call(this.xAxis().scale(this.newx));
        this.gY.call(this.yAxis().scale(this.newy));

        this.gridlinesX.call(
          d3.axisBottom(this.xAxisScale())
            .scale(this.newx)
            .tickSize(-this.svgHeight)
            .tickFormat("")
        );
        this.gridlinesY.call(
          d3.axisLeft(this.yAxisScale())
            .scale(this.newy)
            .tickSize(-this.svgWidth)
            .tickFormat("")
        );

        self.getProportion = self.size / d3.event.transform;
        self.scale = d3.event.transform;
        // for (var i = 0; i < this.region.length; i++) {
        this.bkg[this.mapId].attr("transform", self.scale)
        // }

        for (var i = 0; i < this.labelsNodeID.length; i++) {
          var nodeId = this.labelsNodeID[i];
          var testX = self.newx ? self.newx : self.xAxisScale();
          var testY = self.newy ? self.newy : self.yAxisScale();

          this.stationIcon[nodeId].attr("transform", self.scale)
            .attr("width", this.size * 2)
            .attr("height", this.size * 2)
            .attr("x", testX(self.stationIcon[nodeId].info.x) - self.stationIcon[nodeId].info.offest_x)
            .attr("y", testY(self.stationIcon[nodeId].info.y) - self.stationIcon[nodeId].info.offest_y)

          this.innerSpace.selectAll("circle").attr("transform", self.scale).attr("r", 3 / self.scale.k)
          this.zoomText(nodeId, self.scale)
        }
        for (var i = 0; i < this.stationsNodeID.length; i++) {
          var nodeId = this.stationsNodeID[i];

          this.stationIcon[this.stationsNodeID[i]].attr("transform", self.scale)
            .attr("width", this.size * 4 / self.scale.k)
            .attr("height", this.size * 4 / self.scale.k)
            .attr("x", self.xAxisScale()(self.stationIcon[nodeId].info.x) - self.stationIcon[nodeId].info.offest_x / self.scale.k)
            .attr("y", self.yAxisScale()(self.stationIcon[nodeId].info.y) - self.stationIcon[nodeId].info.offest_y / self.scale.k);
          this.zoomText(nodeId, self.scale)
        }
        self.planeInfo.forEach(function (key) {
          if (self.plane[key.id] !== undefined) {
            self.plane[key.id].attr("transform", function (d, i) {
              return "translate(" + self.newx(d.coor[0]) + "," + self.newy(d.coor[1]) + ") rotate(" + d.angle + ") scale(" + d3.event.transform.k + ")";
            });
          }
        })
      },//控制缩放，并且控制缩放时上面移动的点也跟着动，貌似没有跳跃现象
      zoomText: function (nodeId, proportion) {
        var self = this;
        this.text[nodeId].attr("transform", proportion)
          .attr("font-size", this.size / proportion.k)
          .attr("x", self.xAxisScale()(self.text[nodeId].info.x) - self.text[nodeId].info.offest_x / proportion.k)
          .attr("y", self.yAxisScale()(self.text[nodeId].info.y) + self.text[nodeId].info.offest_y / proportion.k);
        this.coorText[nodeId].attr("transform", proportion)
          .attr("font-size", this.size / proportion.k)
          .attr("x", self.xAxisScale()(self.coorText[nodeId].info.x) - self.coorText[nodeId].info.offest_x / proportion.k)
          .attr("y", self.yAxisScale()(self.coorText[nodeId].info.y) + self.coorText[nodeId].info.offest_y / proportion.k)
      }, //控制文字的缩放时的位置

      getAngle(x1, y1, x2, y2) {
        var x = x1 - x2,
          y = y1 - y2;
        if (!x && !y) {
          return 0;
        }
        var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
        return 360 - angle;
      },

      createArrow() {
        var defs = this.svgViewport.append("defs");

        var arrowMarker = defs.append("marker")
          .attr("id", "arrow")
          .attr("markerUnits", "strokeWidth")
          .attr("markerWidth", "30")
          .attr("markerHeight", "30")
          .attr("viewBox", "0 0 12 12")
          .attr("refX", "6")
          .attr("refY", "6")
          .attr("orient", "auto");

        var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";

        arrowMarker.append("path")
          .attr("d", arrow_path)
          .attr("fill", "#000");
      },

      startMove: function () {
        if (this.startCoor === false) return;
        let key = this.position.key;
        let pos = this.position.pos;
        let color = key.length === 4 ? 'red' : 'blue';
        if (this.stationId.indexOf(key) === -1) {
          this.stationId.push(key);
          // this.circles[key] = this.createCircle(this.xAxisScale()(pos[0]), this.yAxisScale()(pos[1]), color);
          this.text[key] = this.createText(key, pos[0], pos[1], key);
        } else {
          // this.circles[key]
          //   .attr("cx", this.xAxisScale()(pos[0]))
          //   .attr("cy", this.yAxisScale()(pos[1]))
          //   .attr("fill", color);
          this.moveText(key, pos[0], pos[1], key)
        }

        this.stationPos[key] = pos;

        if (this.stationId.length === 7 && !this.hadLine) {
          this.hadLine = true;
          this.createLine();
        }

        if (this.stationId.length === 7) {
          this.createAngleText();
        }
      },//控制点的移动并且颜色变化

      moveText: function (key, node_x, node_y, name, color) {
        var self = this;
        self.text[key]
        // .transition()
          .attr("x", self.xAxisScale()(node_x) - self.getProportion)
          .attr("y", self.yAxisScale()(node_y) + self.getProportion * 2)
          .text(name)
          .attr("fill", color || "black")
        self.text[key].info.x = node_x;
        self.text[key].info.y = node_y
      }, //文字移动

      moveCoorText: function (key, node_x, node_y, coor, color) {
        var self = this;
        self.coorText[key]
        // .transition()
          .attr("x", self.xAxisScale()(node_x) - self.getProportion)
          .attr("y", self.yAxisScale()(node_y) + self.getProportion * 3)
          .text(coor)
          .attr("fill", color || "black")
        self.coorText[key].info.x = node_x;
        self.coorText[key].info.y = node_y
      },//依旧是文字移动

      moveStationIcon: function (key, node_x, node_y, proportion, color) {
        var self = this;
        var testX = self.newx ? self.newx : self.xAxisScale();
        var testY = self.newy ? self.newy : self.yAxisScale();
        if (self.labelsNodeID.indexOf(key) !== -1) {
          self.stationIcon[key]
            .attr("x", testX(node_x) - proportion * 2)
            .attr("y", testY(node_y) - proportion * 2)
            .attr("fill", color)
        } else {
          self.stationIcon[key]
            .attr("x", self.xAxisScale()(node_x) - proportion * 2)
            .attr("y", self.yAxisScale()(node_y) - proportion * 2);
        }


        self.stationIcon[key].info.x = node_x;
        self.stationIcon[key].info.y = node_y
      }, //基站的移动

      setPosition: function (labelInfo, startNodeID, endNodeID) {
        var self = this;
        var position = {};

        if (labelInfo[startNodeID] === undefined || labelInfo[endNodeID] === undefined) {
          return position
        }
        if (self.labelsNodeID.indexOf(startNodeID) !== -1 && self.labelsNodeID.indexOf(endNodeID) !== -1) {
          position.X = (labelInfo[startNodeID][0] + labelInfo[endNodeID][0]) / 2;
          position.Y = (labelInfo[startNodeID][1] + labelInfo[endNodeID][1]) / 2;
          var x = Math.abs(labelInfo[endNodeID][0] - labelInfo[startNodeID][0]);
          var y = Math.abs(labelInfo[endNodeID][1] - labelInfo[startNodeID][1]);

          var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
          // this.planeWidth = z;
          // this.planeHeight = z;
          var sin = x / z;
          var radina = Math.asin(sin);//用反三角函数求弧度
          var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度

          if (labelInfo[startNodeID][0] > labelInfo[endNodeID][0] && labelInfo[startNodeID][1] < labelInfo[endNodeID][1]) {//鼠标在第四象限
            angle = 180 - angle;
          }
          if (labelInfo[startNodeID][0] < labelInfo[endNodeID][0] && labelInfo[startNodeID][1] > labelInfo[endNodeID][1]) {//鼠标在第三象限
            angle = -angle;
          }
          if (labelInfo[startNodeID][0] < labelInfo[endNodeID][0] && labelInfo[startNodeID][1] < labelInfo[endNodeID][1]) {//鼠标在第二象限
            angle = 180 + angle;
          }
          if (labelInfo[startNodeID][0] == labelInfo[endNodeID][0] && labelInfo[startNodeID][1] > labelInfo[endNodeID][1]) {//鼠标在y轴负方向上
            angle = 0;
          }
          if (labelInfo[startNodeID][0] > labelInfo[endNodeID][0] && labelInfo[startNodeID][1] == labelInfo[endNodeID][1]) {//鼠标在x轴正方向上
            angle = 90;
          }
          if (labelInfo[startNodeID][0] < labelInfo[endNodeID][0] && labelInfo[startNodeID][1] == labelInfo[endNodeID][1]) {//鼠标在x轴负方向
            angle = 270;
          }
          if (labelInfo[startNodeID][0] == labelInfo[endNodeID][0] && labelInfo[startNodeID][1] < labelInfo[endNodeID][1]) {//鼠标在x轴负方向
            angle = 180;
          }
          position.angle = angle
        }
        return position
      },//控制飞机旋转的方向

      getDataArr: function (key, node_x, node_y, timeStamp, color) {
        var self = this
        if (self.dataArr[key].length < 1) {
          var c = {x: node_x, y: node_y, time: timeStamp};
          self.dataArr[key].push(c)
          self.circles[key] = []
          self.circles[key].push(self.createCircle(node_x, node_y, color))
        }
        if (self.dataArr[key].length >= 1 && self.dataArr[key][self.dataArr[key].length - 1].time != timeStamp) {
          if (self.dataArr[key].length < self.dataArrLen) {
            var a = {x: node_x, y: node_y, time: timeStamp};
            self.dataArr[key].push(a)
            self.circles[key].push(self.createCircle(node_x, node_y, color))
          } else {
            self.dataArr[key].shift();
            var b = {x: node_x, y: node_y, time: timeStamp};
            self.dataArr[key].push(b);

            for (var i = 0; i < self.dataArr[key].length; i++) {
              self.circles[key][i]
                .attr("cx", (self.dataArr[key][i].x))
                .attr("cy", self.dataArr[key][i].y)
                .attr("fill", color)
            }

          }
        }

      },//记录点移动的轨迹

      getLabelTime: function (key, timeStamp) {
        var update = new Date().getTime()
        if ((update - timeStamp) > 20000) {
          return {"nodeID": key, "status": false}
        } else {
          return {"nodeID": key, "status": true}
        }

      }, //检查长时间不更新的点

      getEquipment: function () {
        var self = this
        self.equipment.forEach(function (key) {
          if (key.equipment_name == "飞机") {
            self.planeInfo.push(key)
          }
        })
      }, //添加设备，就是两点之间确定的设备
      init() {
        let block = document.getElementsByClassName("MapItemId")[0];
        this.startx = -10;
        this.starty = -10;
        this.svgWidth = block.offsetWidth;
        this.svgHeight = block.clientHeight;
        this.rangeWidth = 20;
        this.rangeHeight = 20;
        this.maxEnlarge = 1;
        this.maxNarrow = 1;
        this.createCanvas();
        this.startCoor = true
      },

      onresize: function () {

        var width = this.svgWidth;
        var height = this.svgHeight;
        var index = -1;
        var elem = document.getElementsByClassName("testblock");
        var heightblock = document.getElementsByClassName("heightblock");
        var father = document.getElementsByClassName("father");
        var canvasWidth;
        var hight;
        for (var i = 0; i < elem.length; i++) {
          if (elem[i].getElementsByTagName("div")[0].getAttribute("id") == this.mapId) {
            index = i;
            break
          }
        }
        if (index == -1) {
          return
        }
        for (var i = 0; i < father.length; i++) {
          if (father[i].offsetWidth != 0) {
            canvasWidth = father[i].offsetWidth
          }
        }
        var scale = Number((canvasWidth / width));
        elem[index].style.height = canvasWidth * (height / width) + "px";
        elem[index].style.transform = "scale(" + scale + "," + scale + ")";
        elem[index].style.transformOrigin = "0 0";
        hight = elem[index].style.height;
        heightblock[index].style.height = hight
      }, //重置的比例

      resetSize: function () {
        if (this.reset == "") return;
        if (this.mapId === (this.reset.split("-")[0])) {
          var reduction = d3.zoomIdentity.translate(0, 0).scale(1);
          this.svgViewport.call(this.zoom().transform, reduction)
        }
      },
      remove: function () {
        var self = this
        var reduction = d3.zoomIdentity.translate(0, 0).scale(1);
        self.svgViewport.call(self.zoom().transform, reduction)

        self.innerSpace.selectAll("circle").remove()
        for (var i = 0; i < self.labelsNodeID.length; i++) {
          var nodeID = self.labelsNodeID[i]
          self.stationIcon[nodeID].remove()
          self.text[nodeID].remove()
          self.coorText[nodeID].remove()
        }
        for (var i = 0; i < self.stationsNodeID.length; i++) {
          var nodeID = self.stationsNodeID[i]
          self.stationIcon[nodeID].remove()
          self.text[nodeID].remove()
          self.coorText[nodeID].remove()
        }
        self.labelsNodeID = []
        self.stationsNodeID = []
        self.dataArr = {}
        self.planeInfo.forEach(function (key) {
          if (self.plane[key.id] !== undefined) {
            self.plane[key.id].remove()
          }
        })
        self.plane = {}

      },//清除一部分块 点之类的
      removeCircle: function () {
        this.innerSpace.selectAll("circle").remove()
        for (var i = 0; i < this.labelsNodeID.length; i++) {
          var nodeID = this.labelsNodeID[i]
          this.dataArr[nodeID] = []
        }
      }, //只清除圆
      getDeleteNode: function (nodeIDs, info) {
        var self = this
        for (var i = 0; i < nodeIDs.length; i++) {
          var key = nodeIDs[i]
          if (info[key] === undefined) {
            self.stationIcon[key].remove()
            self.text[key].remove()
            self.coorText[key].remove()
            if (self.dataArr[key] !== undefined) {
              for (i in self.dataArr[key]) {
                self.circles[key][i].remove()
                self.dataArr[key] = []
              }
            }
            nodeIDs.splice(nodeIDs.indexOf(key), 1)
          }
        }
      }//删除标签
    }
  }
</script>


<style>
  .svg-container {
    height: 100%;
    width: 100%;
  }
</style>
